//首页图片收缩上升效果
class imegesBoxRise {
    constructor() {
        this.getELe();
        this.imagesRise();
        this.zIndex();
    }

    getELe() {
        this.imagesBox = document.querySelector('.images_box');
        this.lis = this.imagesBox.querySelectorAll('li');
    }

    zIndex() {
        for (let i = 0; i < this.lis.length; i++) {
            this.lis[i].addEventListener('mouseenter', (e) => {
                e.stopPropagation();
                this.lis[i].style.zIndex = '3';
            })
            this.lis[i].addEventListener('mouseleave', (e) => {
                e.stopPropagation();
                this.lis[i].style.zIndex = '2';
            })
        }
    }

    imagesRise() {
        for (let i = 0; i < this.lis.length; i++) {
            let step = 0;
            let mov = () => {
                if (step < 135) {
                    step += 2;
                    this.lis[i].style.top = -step * i + 'px';
                    window.requestAnimationFrame(mov);
                } else {
                    return;
                }
            }
            window.requestAnimationFrame(mov);
        }
    }
}

new imegesBoxRise();



